<template>
    <view class="active-btn" @click="onClick">
        <image class="coins" :src="'../../static/img/active-money-rain/coins.png'"/>
        <image class="red-packet" :src="'../../static/img/active-money-rain/red_packet.png'"/>
        <text>{{text}}</text>
    </view>
</template>


<script>
    export default {
        name: 'ActiveBtn',
        props: {
            imgs: Array,
            text: String
        },
        methods: {
            onClick() {
                this.$emit('click')
            }
        }
    }
</script>

<style lang="scss">
    @keyframes myMove {
        0% {
            top:-140px;
        }
        10% {
            top: -160px;
        }
        25% {
            top: -140px;
        }
        50% {
            top:-200px;
        }
        100% {
            top:-140px;
        }
    }

    @keyframes myShow {
        0% {
          opacity:100;
        }
        50% {
            opacity:0;
        }
        100% {
            opacity: 0;
        }
    }

    .active-btn {
        z-index: 998;
        position: fixed;
        right: 30px;
        bottom: 156px;
        background: url("../static/img/active-money-rain/rp_bg.png") center bottom no-repeat;
        background-size:100%;
        width: 190px;
        height: 140px;
        .red-packet,.coins{
            width: 190px;
            height: 140px;
        }
        .red-packet{
            top:-140px;
            animation: myMove 1.2s ease-in infinite;
        }
        .coins{
            animation: myShow 1.2s ease-in infinite;
        }

        text {
            position: relative;
            text-align: center;
            color: #fff;
            width: 100%;
            display: block;
        }
    }
</style>

